<template>
  <div class="about">
      <Yemei/>
   
   <div class="bj">
    <div class="tuij">
        <div v-if="kz">
        <h1>欢迎来到在线驾校</h1>
        
            <h2>请选择你要练习的科目，驾照类型，测试类型</h2>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="科目类型" prop="subject">
    <el-radio-group v-model="ruleForm.subject">
      <el-radio label="1" >科目一</el-radio>
      <el-radio label="4" >科目四</el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="驾照类型" prop="type">
    <el-radio-group v-model="ruleForm.type">
      <el-radio label="C1"></el-radio>
      <el-radio label="C2"></el-radio>
      <el-radio label="A1"></el-radio>
      <el-radio label="A2"></el-radio>
      <el-radio label="B1"></el-radio>
      <el-radio label="B2"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="测试类型" prop="sort">
    <el-radio-group v-model="ruleForm.sort">
      <el-radio label="rand">随机测试</el-radio>
      <el-radio label="order">顺序测试</el-radio>
    </el-radio-group>
  </el-form-item>
  
  
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即测试</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
            
        </div>
        <div v-if="!kz">
            <h3>{{xh+1}}.{{data[xh].question}}</h3>
            <img :src="data[xh].pic?data[xh].pic:zwpt" width="400px" height="250px">
        <!-- 选择题的选项 -->
            <div v-show="data[xh].option1">
    <el-form :model="daan" :rules="rules1" ref="daan" label-width="100px" class="demo-ruleForm">
  <el-form-item label="请答题" prop="daan">
    <el-radio-group v-model="ruleForm1.daan">
        
            <el-radio label="A" >{{data[xh].option1}}</el-radio><br>
            <el-radio label="B" >{{data[xh].option2}}</el-radio><br>
            <el-radio label="C" >{{data[xh].option3}}</el-radio><br>
            <el-radio label="D" >{{data[xh].option4}}</el-radio><br>
        
      
        
      

    </el-radio-group>
  </el-form-item>
            <el-form-item>
    <el-button type="primary" @click="submitForm1('ruleForm1')">下一题</el-button>
    <el-button @click="resetForm1('ruleForm1')">重置</el-button>
  </el-form-item>
           </el-form>
           
            </div>
        <!-- 判断题的选项 -->
            <div v-show="!data[xh].option1">
    <el-form :model="ruleForm1" :rules="rules1" ref="ruleForm1" label-width="100px" class="demo-ruleForm">
  <el-form-item label="请答题" prop="daan">
    <el-radio-group v-model="ruleForm1.daan">
      
      
        <el-radio label="对" >正确</el-radio><br>
        <el-radio label="错" >错误</el-radio><br>
      

    </el-radio-group>
  </el-form-item>
            <el-form-item>
    <el-button type="primary" @click="submitForm1('ruleForm1')">立即测试</el-button>
    <el-button @click="resetForm1('ruleForm1')">重置</el-button>
  </el-form-item>
           </el-form>
           
            </div>
    
            
        </div>
    </div>
    </div>
    
  </div>
</template>

<script>

import Yemei from"../components/Yemei.vue"
import {userList} from '../request/api'
export default {
  name: 'about',
components: {
    Yemei
  }, data() {
      return {
          zq:0,
         rules1: { daan:[{required: true, message: '请选择答案', trigger: 'change'}]  },
         ruleForm1:{daan:''} ,
        zwpt:'https://tse1-mm.cn.bing.net/th/id/R-C.7b1a08b9cad671ec7cd3f40a937cf90c?rik=bscFCAJCax1ZJg&riu=http%3a%2f%2fbpic.588ku.com%2felement_pic%2f19%2f03%2f29%2f32fd5b5d10ca51980988fedeb9ecd694.jpg&ehk=EBfBi6AGEGxpmzZ4S6BvITM75dU67ZEekiA%2bh0bxbtc%3d&risl=&pid=ImgRaw&r=0',
        xh:0,
        kz:true,
        data:{},
        ruleForm: {
          appkey:'94c263ad5bdebbed',
          subject: '',
          type: '',
          sort:'',
          pagesize:'20',
         // delivery: false,
          
        },
        rules: {
        
          subject: [
            {  required: true, message: '请选择科目类型', trigger: 'change' }
          ],
          type: [
            { required: true, message: '请选择驾照类型', trigger: 'change' }
          ],
           sort: [
            {  required: true, message: '请选择测试类型', trigger: 'change' }
          ],
          
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('开始了，会测试20道题加油!');
            console.log(this.ruleForm)
            this.shujiu()
            this.kz=false
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
       submitForm1(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            
            // if(this.xh==10){
            //     alert(`恭喜结束测试满分20，得分${this.zq}。`)
            //     this.xh=0
            //     this.kz=true
            //     return
            // } 
            // this.ruleForm1.daan===this.data[this.xh].answer?alert(`答对了,${this.data[this.xh].question}`):alert(`答错了,正确答案是${this.data[this.xh].answer}。${this.data[this.xh].question}`);
            if(this.ruleForm1.daan===this.data[this.xh].answer){
                this.zq= this.zq+1
                alert(`答对了,${this.data[this.xh].explain}`)
                this.xh = this.xh+1
            }else{
              alert(`答错了,正确答案是${this.data[this.xh].answer}。${this.data[this.xh].explain}`)
              this.xh = this.xh+1
              
            }
            this.ruleForm1.daan = "";
            if(this.xh==20){
                alert(`恭喜结束测试满分20，得分${this.zq}。`)
                this.xh=0
                this.kz=true
                return
              }

            
            console.log(this.daan);
            
            console.log(this.xh)
            
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
       resetForm1(formName1) {
        this.$refs[formName1].resetFields();
      },
      getRadioVal(abc){
          let radioVal = abc.target.value;  
        console.log(radioVal);

      },shujiu(){
        //let url = `appkey=${this.ruleForm.appkey}&type=${this.ruleForm.model}&subject=${this.ruleForm.subject}&pagesize=50&sort=${this.ruleForm.testType}`
          userList(this.ruleForm).then(res =>{
            console.log(res.data.result.list) 
            this.data = res.data.result.list;
          })
      }
    }
}
</script>

<style>
/* .dao{
    float:left;
}
.tuij{
    margin-left: 10px;
    float:left;} */
  .about{
    width: 100%;
    overflow:hidden;
  }

 .bj{
      width: 100%;
     justify-content: center; /* 水平居中 */
     align-items: center;     /* 垂直居中 */  
 }
body{
  width: 100%;
}
 
</style>